import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { NavBar, Card, List, Image, Tag } from 'antd-mobile';
import { LeftOutline, PayCircleOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';

export default function Bought() {
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();

    const back = () => {
        navigate('/my');
    };

    const getData = () => {
        setLoading(true);
        axios.get('http://127.0.0.1:3000/bought?id=' + JSON.parse(localStorage.getItem('user')))
            .then(res => {
                setList(res.data.zhong);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    };

    useEffect(() => {
        getData();
    }, []);

    return (
        <div style={{ background: '#f5f5f5', minHeight: '100vh' }}>
            <NavBar 
                // back={<LeftOutline fontSize={20} />} 
                onBack={back}
                style={{ '--height': '50px', borderBottom: '1px solid #eee' }}
            >
                <div style={{ fontSize: '18px', fontWeight: '500' }}>我买到的</div>
            </NavBar>

            {loading ? (
                <div style={{ padding: '15px' }}>
                    {[...Array(4)].map((_, i) => (
                        <Card key={i} style={{ marginBottom: '12px', borderRadius: '8px' }}>
                            <div style={{ height: '100px', background: '#f0f0f0', borderRadius: '6px' }} />
                        </Card>
                    ))}
                </div>
            ) : list.length === 0 ? (
                <div style={{ 
                    display: 'flex', 
                    flexDirection: 'column', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    height: '60vh',
                    color: '#999',
                    padding: '20px',
                    textAlign: 'center'
                }}>
                    <div style={{ fontSize: '16px' }}>您还没有购买任何商品</div>
                    <div style={{ fontSize: '14px', marginTop: '8px' }}>快去挑选心仪的商品吧~</div>
                </div>
            ) : (
                <List style={{ '--border-inner': 'none', '--border-bottom': 'none', '--border-top': 'none' }}>
                    {list.map((item, index) => (
                        <List.Item key={index}>
                            <Card 
                                style={{ borderRadius: '8px', marginBottom: '12px' }}
                            >
                                <div style={{ display: 'flex' }}>
                                    <Image
                                        src={item.img[0].url}
                                        alt={item.title}
                                        width={100}
                                        height={100}
                                        fit='cover'
                                        style={{ borderRadius: '6px' }}
                                    />
                                    <div style={{ flex: 1, marginLeft: '12px' }}>
                                        <div style={{ 
                                            fontSize: '15px', 
                                            fontWeight: '500',
                                            overflow: 'hidden',
                                            textOverflow: 'ellipsis',
                                            whiteSpace: 'nowrap'
                                        }}>
                                            {item.title}
                                        </div>
                                        <div style={{ marginTop: '12px' }}>
                                            <Tag color='danger' style={{ color: '#fff', padding: '4px 8px' }}>
                                                <PayCircleOutline style={{ marginRight: '4px',color:'#fff' }} />
                                                {item.price}
                                            </Tag>
                                            <Tag color='default' style={{ marginLeft: '8px', padding: '4px 8px' }}>已购买</Tag>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        </List.Item>
                    ))}
                </List>
            )}
        </div>
    );
}